<template >
  <div>
    <div class="my_div">
      <img :src='imgs' alt="">
      <p @click="pointDog" class="btn" :style="{color: rgba}">{{names}}</p>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      rgba: ''
    }
  },
  props: ['imgs', 'names'],
  methods: {
    pointDog () {
      this.rgba = `rgb(${Math.round(Math.random() * 255)}, ${Math.round(Math.random() * 255)}, ${Math.round(Math.random() * 255)})`
      this.$emit('buyDog', this.names)
    }
  }
}
</script>
<style scoped>
.my_div {
  width: 200px;
  border: 1px solid black;
  text-align: center;
  float: left;
}

.my_div img {
  width: 100%;
  height: 200px;

}
.btn {
  /* 鼠标改成手的形状 */
  cursor: pointer;
}
</style>
